<template>
  <!-- 系统提醒 -->
    <div class="warn-border">
        <div class="warn-title">系统提醒</div>
        <div class="warn-content-border" v-loading="warnLoading">
            <div class="warn-content">
                <template v-show="warnList.length > 0">
                    <div :class="['warn-content-item','warn-decoration',item.degree === 2?'warn-expired':'']"
                         v-for="(item, index) in warnList"
                         :key="index"
                         @click.stop="handleClickItem(item)"
                    >
                        <div class="warn-li"></div>
                        <div class="note" :title="item.name">
                            <span class="type">{{ item.messageTypeLabel }}</span>{{ item.messageTitle }}
                        </div>
                        <div class="time">
                            {{
                                item.messageContent
                            }}
                        </div>
                    </div>
                </template>
                <el-empty v-show="warnList.length == 0" description="暂无提醒"></el-empty>
            </div>
        </div>
    </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import {listMessageInfo} from "@/api/home/home";

export default {
    name: "systemWarn",
    data() {
        return {
            // 加载状态
            warnLoading: false,
            warnList: []
        }
    },
    methods: {
        parseTime,

        // 获取提醒数据
        getWarnData() {
            this.warnLoading = true;

            listMessageInfo().then(res => {
                this.warnList = res.rows || [];
                this.warnLoading = false;
            })
        },

        // 点击监听
        handleClickItem(item) {
            if (item.messageType === 2) {
                this.$router.push({
                    path: "/dept",
                    query: {
                        activeName: 'yiqi'
                    }
                });
            }
        }
    },
    mounted() {
        // 获取提醒数据
        this.getWarnData();
    }

}
</script>

<style scoped lang="scss">
.warn-border {
  position: relative;
  margin-bottom: 32px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  &.warn-border {
    height: 380px;
  }

  .warn-title {
    border-radius: 4px 4px 0 0;
    padding: 16px;
    background-color: #f5f5f5;
    font-weight: bold;
    font-family: inherit;
    font-size: 24px;
    line-height: 1.1;
  }


  .warn-content-border {
    height: 320px;
    padding: 17px 0;

    .warn-content {
      overflow-y: scroll;
      height: 100%;
      padding: 0 16px;

      &::-webkit-scrollbar {
        display: none;
      }


      .warn-content-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #666;
        line-height: 2;

        .warn-li {
          &::before {
            position: absolute;
            width: 4px;
            height: 4px;
            content: "";
            display: block;
            background-color: #333333;
            //left: 0;
            //top: 13px;
            border-radius: 100%;
          }
        }

        .note {
          position: relative;
          width: calc(100% - 210px);
          cursor: pointer;
          overflow: hidden;
          /* 隐藏溢出的内容 */
          white-space: nowrap;
          /* 不允许文本换行 */
          text-overflow: ellipsis;
          /* 使用省略号表示文本溢出 */


          .type {
            quotes: "[" "]";

            &::before {
              content: open-quote;
            }

            &::after {
              content: close-quote;
            }
          }

        }


        .time {
          width: 170px;
          text-align: right;
        }
      }

      .warn-expired {
        color: red;

        .warn-li {
          &::before {
            background-color: red !important;
          }
        }
      }
    }

    .warn-decoration {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }


  }
}
</style>
